<!DOCTYPE html>
<html>
<head>
    <meta name="Generator" content="YONGDA v1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title>熊大网上书城</title>
    <link href="/style/blue/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/script/jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var username = getCookie("username");
            if(username){
                $("#ECS_MEMBERZONE").html('<div id="append_parent"></div><font class="f4_b">' + username + '</font>, 欢迎您回来！<a href="#">用户中心</a><a href="#">退出</a>');
            }


            //发送ajax请求
            function send(){
                let token = sessionStorage.getItem("token");
                let url = "/book/list?"+$("#searchForm").serialize();
                if(token){
                    url +="&token="+token;
                }
                $.getJSON(url,function(rs){
                    //console.log(rs)
                   if(rs.status==200){
                       //dom操作
                       var books = rs.records;

                       $("#books").empty();//清空
                       for (var i = 0; i < books.length; i++) {
                           var book = books[i];
                           var bookId = "book_" + book.bid; // 使用图书的bid作为bookId
                           var str = "<div class=\"goodsItem\" id=\"" + bookId + "\">\n" +
                               "   <a href=''><img src='/style/blue/images/" + book.imageB + "' alt='" + book.bname + "' class=\"goodsimg\"></a><br />\n" +
                               "   <p><a href=\"#\" title=\"" + book.bname + "\"></a>" + book.bname + "</p>\n" +
                               "   <font class=\"market_s\">￥" + book.price + "元</font><br />\n" +
                               "   <font class=\"shop_s\">￥" + book.currPrice + "元</font><br />\n" +
                               "   <a href=\"#\"><img src=\"/style/blue/images/goumai.gif\"></a> &nbsp;&nbsp;&nbsp;&nbsp;\n" +
                               "   <a href=\"#\"><img src=\"/style/blue/images/shoucang.gif\"></a>\n" +
                               "</div>";
                           // 插入q
                           $("#books").append(str);
                       }

                       // 通过事件委托给动态生成的.goodsItem元素绑定点击事件
                       $("#books").on("click", ".goodsItem", function () {
                           // 获取点击的图书项的bookId
                           var bookId = $(this).attr("id").replace("book_", "");
                           console.log(bookId);
                           // 获取基础URL
                           const redirectURL = "/common/detail.html?bookId=" + bookId;
                           window.location.href = redirectURL;
                       });
                       //页码
                       let totalPages = rs.pages;
                       let pageIndex = rs.pageIndex;

                       let start = 1;
                       let end = totalPages;
                       if(totalPages > 10){
                           start = pageIndex - 5;
                           end = pageIndex + 4;
                           //头溢出
                           if(start < 1){
                               start = 1;
                               end = 10;
                           }
                           //尾溢出
                           if(end > totalPages){
                               end = totalPages;
                               start = totalPages-9;
                           }
                       }
                       let pageStr = '<span class="f_l " style="margin-right: 10px;">总计 <b>'+rs.total+'</b>个记录</span>';
                       for (let i = start; i <= end; i++) {
                           if( i == pageIndex){
                               pageStr+="<span class='page_now'>"+i+"</span>";
                           }else{
                               pageStr +="<a href='javascript:void(0);' class='pnum' data-pi='"+i+"'>["+i+"]</a>";
                           }
                       }
                       pageStr+='<a class="next" href="#">下一页</a>';
                       //追加
                       //先清后加
                       $("#pager").empty(); //清空子元素
                       $("#pager").append(pageStr);
                   }else if(rs.status==401){ //没有登录
                        alert(rs.error);
                        //跳转到登录页面
                       location.href="/login.html";
                   }
                });
            }
            //调用send()
            send();

            //获取cookie函数
            function getCookie(name) {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    if (cookie.indexOf(name + '=') === 0) {
                        return cookie.substring(name.length + 1);
                    }
                }
                return null;
            }

            //给分类超链接绑定点击事件
            $("#mainNav a").click(function(){
                $("#pg").val("1");
                $("#mainNav a").removeClass("cur");
                $(this).addClass("cur");
                //给搜索框设置cid值
                $("#cid").val($(this).data("id"));
                //发送ajax请求
                send();
            });

            //给页码的超链接绑定一个点击事件
            //  $(".pnum").click() 绑定事件,是要求元素不是添加到
            // 使用jquery的另一种绑定事件方法
            $(document).on("click",".pnum",function(){
                $("#pg").val($(this).data("pi"));
                //发送ajax请求
                send();
            });
            // $(".pnum").click(function(){
            //
            //     $("#pg").val($(this).data("pi"));
            //     //发送ajax请求
            //    send();
            // });

            //给搜索按钮绑定事件
            $("#searchBtn").click(function(){
                $("#pg").val("1");
                send();
            });

            //动态排序
            $("#publishtimeBtn").toggle(function(){
                $($(this).children("img").get(0)).attr("src","/style/blue/images/goods_id_ASC.gif");
                $("#oc").val("publishtime"); //排序列
                $("#ot").val("asc");
                $($(this).next("a").children("img").get(0)).attr("src","/style/blue/images/shop_price_default.gif");
                $("#pg").val("1");
                send();
            },function () {
                $($(this).children("img").get(0)).attr("src","/style/blue/images/goods_id_DESC.gif");
                $("#oc").val("publishtime"); //排序列
                $("#ot").val("desc");
                $($(this).next("a").children("img").get(0)).attr("src","/style/blue/images/shop_price_default.gif");
                $("#pg").val("1");
                send();
            });
        });

    </script>
</head>
<body>
<div class="block clearfix" style="position: relative; height: 98px;">
    <a href="#" name="top"><img class="logo" src="/style/blue/images/logo_max.png"></a>
    <div id="topNav" class="clearfix">
        <div style="float: left;">
            <font id="ECS_MEMBERZONE"><div id="append_parent"></div>
                <font class="f4_b">finisher</font>, 欢迎您回来！
                <a href="#">用户中心</a>
                <a href="#">退出</a>
            </font>
        </div>
        <div style="float: right;">
            <a href="#">查看购物车</a>
        </div>
    </div>
    <div id="mainNav" class="clearfix">
        <a data-id="-1" href="javascript:void(0)" class="cur">全部分类<span></span></a>
        <a data-id="C6068B5957984E398C0DCDA1E80A7F87" >JavaSE分类<span></span></a>
        <a data-id="AB5FF7401CCB4560B0CE33F26C3907FC" href="javascript:void(0)">JavaEE分类<span></span></a>
        <a data-id="3763875FC8DE407F81CAE0EBF9097150"  href="javascript:void(0)">JavaScript分类<span></span></a>
    </div>
</div>

<div class="header_bg">
    <div style="float: left; font-size: 14px; color:white; padding-left: 15px;">
    </div>

    <form id="searchForm" method="get" action="/book/queryPage.do" >
        <input name="keywords" id="keyword" type="text" value="" />
        <input type="hidden" name="cid" value="-1" id="cid"/>
        <input type="hidden" name="pageIndex" value="1" id="pg"/>
        <input type="hidden" name="orderColumn" value="publishtime" id="oc"/>
        <input type="hidden" name="orderType" value="desc" id="ot"/>
        <input id="searchBtn" value=" " class="go" style="cursor: pointer; background: url('/style/blue/images/sousuo.gif') no-repeat scroll 0% 0% transparent; width: 39px; height: 20px; border: medium none; float: left; margin-right: 15px; vertical-align: middle;" type="button" />
    </form>
</div>
<div class="blank5"></div>
<div class="block box">
    <div class="blank"></div>
</div>
<div class="blank"></div>
<div class="block box">
    <div class="block clearfix">
        <div class="AreaL">
            <h3><span>商品分类</span></h3>
            <div id="category_tree" class="box_1">
                <dl style="background-color: #0066CC;">
                    <dt ><a style="color:#FFF" href="#">全部分类</a></dt>
                    <dd>       </dd>
                </dl>
                <dl>
                    <dt><a href="#">JavaSE分类</a></dt>
                    <dd>       </dd>
                </dl>
                <dl>
                    <dt><a href="#">JavaEE分类</a></dt>
                    <dd>       </dd>
                </dl>
                <dl>
                    <dt><a href="#">JavaScript分类</a></dt>
                    <dd>       </dd>
                </dl>

            </div>
            <div class="blank"></div><div style="display: block;" class="box" id="history_div">
            <h3><span>浏览历史</span></h3>
            <div class="box_1">

                <div class="boxCenterList clearfix" id="history_list">
                    <ul class="clearfix">
                        <li class="goodsimg">
                            <a href="#" target="_blank">
                                <img src="/style/blue/images/book_img/23239786-1_b.jpg" alt="Java虚拟机并发编程" class="B_blue" />
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank" title="Java虚拟机并发编程">Java虚拟机并发编程</a><br />
                            本店售价：<font class="f1">￥40.70元</font><br />
                        </li>
                    </ul>
                    <ul class="clearfix">
                        <li class="goodsimg">
                            <a href="#" target="_blank">
                                <img src="/style/blue/images/book_img/22757564-1_b.jpg" alt="基于MVC的JavaScript" class="B_blue" />
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank" title="基于MVC的JavaScript">基于MVC的JavaScript</a><br />
                            本店售价：<font class="f1">￥40.70元</font><br />
                        </li>
                    </ul>
                    <ul id="clear_history">
                        <a onclick="clear_history()">[清空]</a>
                    </ul>
                </div>
            </div>
        </div>
            <div class="blank5"></div>

        </div>


        <div class="AreaR">
            <div class="blank"></div>
            <div class="box">
                <div class="box_1">
                    <h3>
                        <span>商品列表</span>
                        <form method="GET" class="sort" name="listform">
                            显示方式：
                            <a href="#"><img src="/style/blue/images/display_mode_list.gif" alt=""></a>
                            <a href="#"><img src="/style/blue/images/display_mode_grid_act.gif" alt=""></a>
                            <a href="#"><img src="/style/blue/images/display_mode_text.gif" alt=""></a>&nbsp;&nbsp;


                            <a href="javascript:void(0);"  id="publishtimeBtn"><img src="/style/blue/images/goods_id_DESC.gif" alt="按上架时间排序"></a>
                            <a href="javascript:void(0);" id="priceBtn" >
                                <img src="/style/blue/images/shop_price_default.gif" alt="按价格排序">
                            </a>
                        </form>
                    </h3>
                    <form name="compareForm" action="" method="post" onsubmit="return compareGoods(this);">
                        <div id="books" class="clearfix goodsBox" style="border: medium none; padding: 11px 0pt 10px 5px;">
                        </div>
                    </form>

                </div>
            </div>
            <div class="blank5"></div>
            <form name="selectPageForm" action="" method="get">
                <div id="pager" class="pagebar">

                </div>
            </form>
        </div>

    </div>

</div>

<div class="blank"></div>
<iframe src="/common/footer.html" frameborder="0" scrolling="no" width="100%" height="300"></iframe>

</body>
</html>